<template>
  <view class="login">
    <view class="login-form">
      <h2>用户登录</h2>
      <view class="input_wrapper">
        <view class="inputItem" :class="{ focus: isFocus.mobile, mobile_empty: emptyFlag.mobile, mobile_error: errorFlag.mobile }">
          <span class="chooseArea">+86</span>
          <view class="inputContent">
            <input
              type="text"
              placeholder="请输入手机号"
              maxlength="11"
              autoFocus
              @focus="focus('mobile')"
              @blur="blur('mobile')"
              @input="inputMobile"
            >
          </view>
        </view>
        <view v-if="!mobileLogin" class="inputItem pwdInput" :class="{ focus: isFocus.password, password_empty: emptyFlag.password }">
          <img :src="icons.password" alt="" class="icon">
          <view class="inputContent">
            <input
              ref="password"
              type="password"
              placeholder="请输入密码"
              @focus="focus('password')"
              @blur="blur('password')"
              @input="inputPassword"
            >
          </view>
        </view>
        <view v-else class="inputItem codeInput" :class="{ focus: isFocus.code, code_empty: emptyFlag.code, code_error: errorFlag.code }">
          <view class="inputContent ">
            <input placeholder="请输入验证码" :maxlength="codeLen" @focus="focus('code')" @blur="blur('code')" @input="inputCode">
          </view>
          <view class="getCodeBtn">
            <button
              :class="{ 'code-active': !getCodeDisabled, 'code-forbidden': getCodeDisabled }"
              :disabled="getCodeDisabled"
              @click="getVerifyCode()"
            >
              {{ getCodeBtnText }}
            </button>
          </view>
        </view>
      </view>

      <!-- <view class="switch-login-method">
        <view class="login-method" @tap="mobileLogin = !mobileLogin">
          {{ mobileLogin ? '使用密码登录' : '使用短信验证码登录' }}
        </view>
      </view> -->

      <view class="login-btn">
        <button :class="{ opt_button: !isLoginForbidden, forbidden: isLoginForbidden }" :disabled="isLoginForbidden" @tap="login">
          {{ mobileLogin ? '登录/注册' : '登录' }}
        </button>
      </view>
    </view>

    <!-- <view class="otherLoginWays">
      <view class="otherWayTextWrapper">
        <view class="otherWayText">其他登录方式</view>
      </view>
      <view class="icons">
        <wx-login @finish="checkLogined" />
      </view>
    </view> -->

    <view class="protocol"> 注册登录代表阅读并同意<span @tap="goProtocol">用户服务协议</span></view>
  </view>
</template>

<script>
import login from '@/api/account'
import icons from './icons'
// import wxLogin from './mpWeixinLoginBtn'

const app = getApp()

export default {
  // components: { wxLogin },
  data() {
    return {
      redirect: null,
      mobileLogin: false,
      form: {
        mobile: '',
        password: '',
        code: ''
      },
      icons: {
        password: icons.password_icon
      },
      isFocus: {
        mobile: false,
        password: false,
        code: false
      },
      errorFlag: {
        mobile: false,
        password: false,
        code: false
      },
      emptyFlag: {
        mobile: false,
        password: false,
        code: false
      },
      // 获取验证码按钮文字
      getCodeBtnText: '获取验证码',
      codeLen: 4,
      // 倒计时
      countDownTime: 60,
      timeOut: true,
      timer: null
    }
  },

  onLoad(options) {
    let redirect = options.redirect
    if (redirect) {
      redirect = decodeURIComponent(redirect)
      this.redirect = redirect
    }
  },
  onShow() {
    this.checkLogined()
  },

  computed: {
    // 登录按钮禁用
    isLoginForbidden() {
      if (!this.mobileLogin) {
        return !this.form.mobile || this.form.mobile.length !== 11 || this.errorFlag.mobile || !this.form.password || this.errorFlag.password
      } else {
        return !this.form.mobile || this.form.mobile.length !== 11 || this.errorFlag.mobile || !this.form.code || this.errorFlag.code
      }
    },
    // 获取验证码按钮禁用
    getCodeDisabled() {
      return !this.form.mobile || this.errorFlag.mobile || !this.timeOut
    }
  },

  methods: {
    inputMobile(e) {
      const mobile = e.detail.value
      // 输入手机号
      const value = mobile.replace(/\D/g, '').substr(0, 11) // 不允许输入非数字字符，超过11位数字截取前11位
      // 判断手机号格式是否正确
      const regExp = /^1[3456789]\d{9}$/
      this.errorFlag.mobile = !regExp.test(value)
      this.form.mobile = value
      this.emptyFlag.mobile = !value
    },
    // 用户输入密码
    inputPassword(e) {
      const password = e.detail.value
      this.form.password = password
      this.emptyFlag.password = !password
    },
    inputCode(e) {
      const code = e.detail.value
      this.form.code = code
      this.errorFlag.code = code.length !== this.codeLen
      this.emptyFlag.code = !code
    },
    focus(type) {
      // 聚焦输入框
      this.isFocus[type] = true
      this.errorFlag[type] = false
      if (type === 'password') {
        this.icons.password = icons.password_active
      }
    },
    blur(type) {
      // 输入框失焦
      this.isFocus[type] = false
      if (type === 'password') {
        this.icons.password = icons.password_icon
      }
    },
    goMobileLogin() {
      uni.navigateTo({
        url: '/pages/auth/mobile_login'
      })
    },
    // 用户协议
    goProtocol() {
      uni.navigateTo({
        url: '/pages/common/web?url=' + app.globalData.user_protocol
      })
    },
    goRegister() {
      uni.navigateTo({
        url: '/pages/auth/register'
      })
    },

    // 获取验证码
    getVerifyCode() {
      const that = this
      const mobile = this.form.mobile.replace(/\s*/g, '') // 去除空格
      if (!mobile || this.errorFlag.mobile) {
        uni.showToast({
          title: '手机号码不正确',
          position: 'center'
        })
      } else {
        this.$emit('getCode', mobile)
        this.timeOut = false
        uni.showToast({
          title: '验证码已发送',
          position: 'center'
        })
        // 倒计时
        this.timer = setInterval(() => {
          that.countDownTime--
          // that.getCodeBtnText = this.countDownTime + "s后重新获取";
          that.getCodeBtnText = this.countDownTime + '秒'
          if (that.countDownTime <= 0) {
            clearInterval(this.timer)
            that.countDownTime = 60
            that.timeOut = true
            that.getCodeBtnText = '获取验证码'
          }
        }, 1000)
      }
    },
    login() {
      // 发送请求
      if (!this.mobileLogin) {
        login
          .pwdLogin({
            mobile: this.form.mobile,
            password: this.form.password
          })
          .then(res => {
            uni.setStorageSync('access_token', res.token)
            this.checkLogined()
          })
      } else {
        login
          .mobileLogin({
            mobile: this.form.mobile,
            mobile_code: this.form.code
          })
          .then(res => {
            uni.setStorageSync('access_token', res.token)
            this.checkLogined()
          })
      }
    },
    checkLogined() {
      if (uni.getStorageSync('access_token')) {
        if (this.redirect) {
          uni.redirectTo({ url: this.redirect })
        } else {
          uni.navigateBack({ delta: 0 })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@mainColor: #007cdc;
.gradient {
  background-image: linear-gradient(to right, @mainColor, lighten(@mainColor, 18%));
}
.error {
  background: red;
  transform: scaleY(1);
  font-size: 0.72rem;
  color: red;
  text-align: right;
  line-height: 1.6rem;
}
.login {
  width: 80%;
  margin: auto;
  text-align: center;
  h2 {
    color: #666666;
    font-size: 1.6rem;
  }
  .login-form {
    padding-top: 15vh;
  }
  //用户名、密码输入框
  .input_wrapper {
    .inputItem {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top: 1.42rem;
      &::after {
        content: '';
        position: absolute;
        height: 1px;
        width: 100%;
        bottom: 0;
        transform: scaleY(0.5);
        background: #bfbfbf;
      }

      img {
        width: 1.2rem;
        height: 1.2rem;
      }

      .inputContent {
        padding: 0.4rem;
        input {
          font-size: 1rem;
          border: none;
          outline: none;
          width: 90%;
          letter-spacing: 0.1rem;
          &::placeholder {
            color: #aaaaaa;
          }
        }
      }

      .codeInput {
        display: flex;
        flex-direction: row;
      }
      .getCodeBtn {
        button {
          letter-spacing: 0;
          font-size: 0.68rem;
          border-radius: 6px;
          margin-bottom: 0.4rem;
          text-indent: 0;
          padding-left: 0.2rem;
          padding-right: 0.2rem;
          white-space: nowrap;
        }
        .code-active {
          background: white;
          color: @mainColor;
          border: 0.5px @mainColor solid;
          &:active {
            background: #f1f1f1;
          }
        }
        .code-forbidden {
          background: tint(@mainColor, 90%);
          color: fade(@mainColor, 40%);
          border: #f2f2f2;
        }
      }
    }
    .focus::after {
      background: @mainColor;
    }
    .mobile_empty::after {
      content: '手机号不能为空';
      .error();
    }
    .mobile_error::after {
      content: '请填入正确的手机号';
      .error();
    }
    .password_empty::after {
      content: '密码不能为空';
      .error();
    }
    .code_empty::after {
      content: '验证码不能为空';
      .error();
    }
    .code_error::after {
      content: '验证码错误';
      .error();
    }
  }
  .login-btn {
    margin-top: 1rem;
  }
  //登录按钮
  button {
    .gradient;
    border: none;
    outline: none;
    width: 100%;
    position: relative;
    color: white;
    border-radius: 1.2rem;
    overflow: hidden;
    letter-spacing: 0.6rem;
    text-indent: 0.6rem;
    text-align: center;
    outline: 0;
  }
  .opt_button {
    cursor: pointer;
    &::after {
      content: '';
      background: #fff;
      display: block;
      position: absolute;
      width: 200%;
      height: 200%;
      top: -5%;
      border-radius: 50px;
      margin-left: -80%;
      opacity: 0;
      transition: all 0.75s ease-in-out;
    }
    &:active::after {
      width: 0;
      opacity: 0.6;
      transition: 0s;
    }
  }
  .forbidden {
    background: tint(@mainColor, 70%);
    color: fade(white, 80%);
  }

  .switch-login-method {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.72rem;
    margin-top: 0.6rem;
    color: #333333;
    .login-method {
      margin-right: 0.2rem;
      color: #2986de;
      margin-bottom: 0.6rem;
    }
  }

  //注册按钮
  .registerBtn {
    background: white;
    color: @mainColor;
    border: 1px solid @mainColor;
    margin-top: 5%;
    &:active {
      background: fade(@mainColor, 8%);
    }
  }

  /************************忘记密码/注册/用户协议*****************************/
  .forgetPwd_register_protocol {
    display: flex;
    flex-direction: column;
    margin: 3.6rem auto;
    font-size: 0.7rem;
    align-items: center;
    justify-content: center;
    .forgetPwd_register {
      display: flex;
      flex-direction: row;
      justify-content: center;
      font-weight: bold;
      .separator {
        color: #aaaaaa;
      }
    }
    .space_between {
      justify-content: space-between;
      width: 11.2rem;
    }
  }

  //没有第三方登录时
  .footer {
    position: fixed;
    bottom: 1.4%;
    left: 24.3%;
    right: 24.3%;
  }

  /*********************第三方登录******************/
  .otherLoginWays {
    position: relative;
    margin: 15vh auto 3vh auto;
    text-align: center;
    .otherWayTextWrapper {
      line-height: 0;
      color: #666666;
      &:before,
      &:after {
        position: absolute;
        background: #cccccc;
        content: '';
        height: 1px;
        width: 30%;
      }
      &:before {
        left: 0;
      }
      &:after {
        right: 0;
      }
      .otherWayText {
        font-size: 0.8rem;
        color: #bbbbbb;
      }
    }
    .icons {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-top: 1.2em;
      /deep/ img.icon {
        width: 2.5rem;
        height: 2.5em;
      }
    }
  }

  .protocol {
    position: relative;
    font-size: 0.72em;
    margin-top: 3vh;
    padding-bottom: 3vh;
    color: #333333;
    span {
      color: #2986de;
    }
  }
}
</style>
